<script>
import { Edit, Delete } from '@element-plus/icons-vue';
import crudMixin from '../../mixins/crudMixin';
import SearchBar from '../common/SearchBar.vue';
import BasePagination from '../common/BasePagination.vue';
import FormDialog from '../common/FormDialog.vue';
import TableActions from '../common/TableActions.vue';
import axios from '../../axios/axiosHelper';

export default {
  name: "Member",
  components: {
    SearchBar,
    BasePagination,
    FormDialog,
    TableActions
  },
  mixins: [crudMixin],
  data() {
    return {
      // 配置信息
      apiEndpoint: '/member',
      entityName: '会员',
      
      // 表单数据
      form: {
        id: '',
        user_no: '',
        passwd: '',
        name: '',
        gender: '',
        email: '',
        regis_date: ''
      },
      
      // 验证规则
      rules: {
        user_no: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        passwd: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 100, message: '密码长度在 6 到 100 个字符', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入会员姓名', trigger: 'blur' },
          { min: 2, max: 50, message: '姓名长度在 2 到 50 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' },
          { max: 100, message: '邮箱长度不能超过 100 个字符', trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        regis_date: [
          { required: true, message: '请选择注册时间', trigger: 'change' }
        ]
      }
    };
  },
  computed: {
    // 表格操作按钮配置
    tableActions() {
      return (row) => [
        {
          type: 'primary',
          icon: 'Edit',
          tooltip: '编辑',
          handler: this.handleEdit,
          params: [row.index, row.row]
        },
        {
          type: 'danger',
          icon: 'Delete',
          tooltip: '删除',
          handler: this.handleDelete,
          params: [row.index, row.row]
        }
      ];
    }
  },
  methods: {
    // 获取默认表单数据
    getDefaultForm() {
      return {
        id: '',
        user_no: '',
        passwd: '',
        name: '',
        gender: '男',
        email: '',
        regis_date: new Date()
      };
    },
    
    // 检查用户名是否存在

    
    // 重写删除ID获取方法
    getDeleteId(row) {
      return row.id;
    },
    
    // 重写编辑模式判断
    isEditMode(data) {
      return !!data.id;
    },
    

    
    // 获取会员状态名称
    getUserFlagName(flag) {
      return flag === 1 ? '正常' : '禁用';
    }
  }
}
</script>

<template>
  <div class="member-container">
    <!-- 搜索栏 -->
    <SearchBar
      title="会员管理"
      add-button-text="添加会员"
      placeholder="请输入用户名或姓名搜索..."
      v-model="searchForm.code"
      @add="handleAdd"
      @search="handleSearch"
    />

    <!-- 表格 -->
    <div class="table-container">
      <el-table 
        :data="tableData" 
        border 
        style="width: 100%" 
        v-loading="loading"
        element-loading-text="加载中..."
        :header-cell-style="{backgroundColor: '#f5f7fa', color: '#606266'}"
        highlight-current-row
        stripe
      >
        <el-table-column type="index" min-width="5%" align="center" label="序号"></el-table-column>
        <el-table-column prop="id" label="会员ID" min-width="8%" align="center"></el-table-column>
        <el-table-column prop="user_no" label="用户名" min-width="12%" align="center"></el-table-column>
        <el-table-column prop="passwd" label="密码" min-width="12%" align="center">
          <template #default="scope">
            ******
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" min-width="12%" align="center"></el-table-column>
        <el-table-column prop="gender" label="性别" min-width="8%" align="center"></el-table-column>
        <el-table-column prop="email" label="邮箱" min-width="15%" align="center"></el-table-column>
        <el-table-column prop="regis_date" label="注册时间" min-width="15%" align="center">
          <template #default="scope">
            {{ scope.row.regis_date ? new Date(scope.row.regis_date).toLocaleString() : '-' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="15%" align="center">
          <template #default="scope">
            <TableActions :actions="tableActions({ index: scope.$index, row: scope.row })" />
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <BasePagination
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <!-- 添加/编辑对话框 -->
    <FormDialog
      :title="dialogTitle"
      v-model="dialogVisible"
      :form="form"
      :rules="rules"
      :loading="loading"
      @submit="submitForm"
    >
      <template #default="{ form }">
        <el-form-item label="会员ID" prop="id" v-if="form.id">
          <el-input 
            v-model="form.id" 
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="user_no">
          <el-input 
            v-model="form.user_no" 
            placeholder="请输入用户名"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="passwd">
          <el-input 
            v-model="form.passwd" 
            placeholder="请输入密码"
            clearable
            type="password"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input 
            v-model="form.name" 
            placeholder="请输入姓名"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="form.gender">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
            <el-radio label="其他">其他</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input 
            v-model="form.email" 
            placeholder="请输入邮箱"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="注册时间" prop="regis_date">
          <el-date-picker
            v-model="form.regis_date"
            type="datetime"
            placeholder="选择注册时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            :disabled="form.id !== ''"
          ></el-date-picker>
        </el-form-item>
      </template>
    </FormDialog>
  </div>
</template>

<style scoped>
.member-container {
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow: auto;
}

.header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}

.title-section {
  display: flex;
  align-items: center;
  gap: 15px;
}

.page-title {
  margin: 0;
  font-size: 20px;
  color: #303133;
  font-weight: 600;
  position: relative;
  padding-left: 12px;
}

.page-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 18px;
  background-color: #409EFF;
  border-radius: 2px;
}

.search {
  display: flex;
  gap: 10px;
  align-items: center;
}

.table-container {
  background-color: #fff;
  border-radius: 6px;
  padding: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
  flex: 1;
  overflow: auto;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  padding-top: 15px;
  border-top: 1px solid #ebeef5;
}

.operation-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.address-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.el-table {
  margin: 0;
  border-radius: 6px;
  overflow: hidden;
}

.el-table :deep(th) {
  background-color: #f5f7fa !important;
  color: #606266;
  font-weight: bold;
  text-align: center;
}

.el-table :deep(td) {
  text-align: center;
}

.el-button--primary {
  background-color: #409EFF;
}

.el-button--success {
  background-color: #67C23A;
}

.el-button--danger {
  background-color: #F56C6C;
}

.custom-dialog :deep(.el-dialog__header) {
  padding: 10px;
  margin: 0;
  border-bottom: 1px solid #ebeef5;
  background-color: #f5f7fa;
}

.custom-dialog :deep(.el-dialog__title) {
  font-weight: 600;
  color: #303133;
  font-size: 18px;
}

.custom-dialog :deep(.el-dialog__body) {
  padding: 20px 10px;
}

.custom-dialog :deep(.el-dialog__footer) {
  padding: 10px;
  border-top: 1px solid #ebeef5;
  background-color: #f5f7fa;
}

.dialog-content {
  max-height: 60vh;
  overflow-y: auto;
}

.member-form {
  width: 100%;
}

.el-form-item {
  margin-bottom: 22px;
}

.el-input {
  width: 100%;
}

/* 添加一些动画效果 */
.el-table :deep(tr) {
  transition: background-color 0.3s;
}

.el-table :deep(tr:hover) {
  background-color: #f0f9eb;
}

.el-button {
  transition: all 0.3s;
}

.el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .header {
    flex-direction: column;
    gap: 15px;
  }
  
  .search {
    width: 100%;
  }
  
  .search .el-input {
    flex: 1;
  }
}
</style>